<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <h1>{{ msg }}</h1>

    <i-msg>中间是否可以存放内容？</i-msg>

</div>
</body>

<script src="lib/vue.js"></script>

<script type="text/javascript">

    /*
    * 由于 slot 没有name属性，则我们称之为 匿名插槽，有的也叫做 default 插槽
    * */
    Vue.component('i-msg', {

        template: `
            <div>
            <h2>我是消息组件</h2>
            <slot></slot>

</div>
        `
    });


    new Vue({
        el: '#app',
        data: {
            msg: '插槽'
        }
    })

</script>

</html>
